@import "../styles/mixins/index.less";
@import "../styles/themes/index.less";
@import '../backdrop/index.less';

.@{wux-prefix}-filterbar {
    position: relative;
    z-index: @z-index-filterbar;

    &__bd {
        display: flex;
        position: relative;
        background-color: #FAFAFA;
        padding: 11px 0;
        font-size: 14px;
        height: 50px;
        line-height: 24px;
        text-align: center;
        box-sizing: border-box;

        &::after {
            .setBottomLine(@border-color-split);
        }
    }

    &__item {
        position: relative;
        display: block;
        flex: 1;
        padding: 0 5px;
        .ellipsis();

        &::after {
            .setRightLine(@border-color-split);

            height: 50%;
            transform: scaleX(0.5) translateY(50%);
        }

        &--checked {
            color: #f15353;

            .@{wux-prefix}-filterbar__icon {
                &--radio,
                &--checkbox {
                    background-image: url();
                }
            }
        }

        &--visible {
            .@{wux-prefix}-filterbar__icon {
                &--radio,
                &--checkbox {
                    transform: scaleY(-1);
                }
            }
        }
    }

    &__text {
        position: relative;
        box-sizing: border-box;
        display: inline-block;
        max-width: 100%;
        .ellipsis();
    }

    &__item--has-icon &__text {
        padding-right: 20px;
    }

    &__icon {
        position: absolute;
        right: 0;
        top: 50%;
        width: 15px;
        height: 12px;
        margin-top: -6px;
        /* margin-left: 3px; */
        display: inline-block;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;

        &--radio,
        &--checkbox {
            background: url() no-repeat;
            background-size: 8px auto;
            background-position: 0 4px;
        }

        &--sort {
            background-position: 0 -26px;
            background-size: 9px 36px;
            background-image: url();
        }

        &--sort-desc {
            background-position: 0 -12px;
            transform: scaleY(-1);
        }

        &--sort-asc {
            background-position: 0 -12px;
        }

        &--filter {
            background: url() no-repeat;
            background-size: 13px auto;
        }
    }

    &__select {
        position: absolute;
        top: 50px;
        left: 0;
        width: 100%;
        background-color: #fff;
        box-sizing: border-box;
    }

    &__pop {
        height: 100%;
        width: 90%;
        overflow: hidden;
        position: fixed;
        top: 0;
        left: 10%;
        z-index: @z-index-filterbar + 10;
        background-color: #fff;
        box-sizing: border-box;
    }

    &__scroll-view {
        max-height: 270px;
    }

    &__pop &__btn {
        @supports (padding-bottom: constant(safe-area-inset-bottom)) {
            padding-bottom: constant(safe-area-inset-bottom);
        }

        @supports (padding-bottom: env(safe-area-inset-bottom)) {
            padding-bottom: env(safe-area-inset-bottom);
        }
    }

    &__pop &__scroll-view {
        max-height: none;
        height: 85%;
        height: calc(~"100% - 44px");

        @supports (padding-bottom: constant(safe-area-inset-bottom)) {
            height: calc(~"100% - 44px - constant(safe-area-inset-bottom)");
        }

        @supports (padding-bottom: env(safe-area-inset-bottom)) {
            height: calc(~"100% - 44px - env(safe-area-inset-bottom)");
        }
    }

    &__panel {
        padding: 0 15px;

        &:last-child {
            padding-bottom: 20px;
        }
    }

    &__panel-hd {
        padding-top: 20px;
        padding-bottom: 2px;
        color: #252525;
        font-size: 15px;
        overflow-x: hidden;
        display: flex;
        align-items: center;
    }

    &__panel-selected {
        .ellipsis();

        flex: 1;
        text-align: right;
        font-size: 13px;
        padding-left: 30px;
        color: #f15353;
    }

    &__groups {
        overflow: hidden;
        font-size: 13px;
        margin: 0 -5px;
    }

    &__group {
        .ellipsis();

        position: relative;
        height: 32px;
        width: 33.3333%;
        color: #232326;
        margin-top: 10px;
        float: left;
        box-sizing: border-box;
        padding-left: 5px;
        padding-right: 5px;
    }

    &__radio,
    &__check,
    &__btn {
        .ellipsis();

        height: 32px;
        display: block;
        text-align: center;
        line-height: 32px;
        background-color: #f0f2f5;
        border-radius: @border-radius-base;
        border: 1px solid #f0f2f5;
        box-sizing: border-box;
    }

    &__radio,
    &__check {
        position: absolute;
        left: 5px;
        top: 0;
        width: 100%;
        width: calc(~"100% - 10px");
        opacity: 0;
    }

    &__btn--checked {
        border-color: #fdf0f0;
        background-color: #fdf0f0;
        color: #f15353;

        &::after {
            content: "";
            position: absolute;
            right: 10rpx;
            bottom: 0;
            width: 30rpx;
            height: 30rpx;
            background: url() no-repeat;
            background-size: 30rpx auto;
            overflow: hidden;
            z-index: 1;
        }
    }
}

.@{wux-prefix}-filterbar__btns {
    height: auto;
    min-height: 44px;
    display: -webkit-box;
    overflow: hidden;

    .@{wux-prefix}-filterbar__btn {
        background-color: #fff;
        color: #252525;
        font-size: 16px;
        position: relative;
        display: -webkit-box;
        -webkit-box-flex: 1;
        -webkit-box-align: center;
        -webkit-box-pack: center;
        border: none;
        border-radius: 0;
        min-height: 44px;
        height: auto;
        line-height: 44px;

        &::before {
            .setTopLine(@border-color-split);
        }
    }

    .@{wux-prefix}-filterbar__btn--danger {
        background-color: #f23030;
        color: #fff;

        &::before {
            display: none;
        }
    }
}
